import 'package:flutter/material.dart';
import 'package:flutter_vant/component/icon.dart';
import 'package:rlstyles/main.dart';

class VanCellArrowDirection {
  static const left = 'left';
  static const right = 'right';
  static const up = 'up';
  static const bottom = 'bottom';
}

class VanCellSlot {
  static const title = 'title';
  static const value = 'value';
  static const label = 'label';
}

class VanCell extends HookWidget {
  // 左侧标题
  final String? title;
  // 右侧内容
  final String? value;
  // 标签下面描述信息
  final String? label;
  // 左边图标
  final dynamic icon;
  // 是否显示内边框
  final bool border;
  // 是否显示右侧箭头
  final bool? isLink;
  // 箭头方向
  final String? arrowDirection;
  // 是否显示星号必填项
  final bool required;
  // 是否使内容居中
  final bool? center;
  // 单元格大小
  final String? size;
  // 页面导航
  final String? to;
  // 箭头方向
  // final VanCellArrowDirection arrowDirection;
  // 左侧标题样式
  final Map<String, dynamic> titleStyle;
  // 右侧内容样式
  final Map<String, dynamic> valueStyle;
  // 描述信息样式
  final Map<String, dynamic> labelStyle;
  // slot插槽
  final Map<String, dynamic> slot;
  // 点击事件
  final Function()? onClick;
  @override
  const VanCell(
      {Key? key,
      this.title = '',
      this.value = '',
      this.label = '',
      this.size = '',
      this.to = '',
      this.arrowDirection = VanCellArrowDirection.right,
      this.icon,
      this.border = true,
      this.isLink = false,
      this.required = false,
      this.center = false,
      // this.arrowDirection = VanCellArrowDirection,
      this.titleStyle = const {},
      this.valueStyle = const {},
      this.labelStyle = const {},
      this.onClick,
      this.slot = const {}});

  @override
  Widget build(BuildContext context) {
    Map getStyles() {
      return {
        'main': {
          CssRule.paddingLeft: 16,
          CssRule.paddingRight: 16,
          CssRule.paddingTop: 10,
          CssRule.paddingBottom: 10,
          CssRule.backgroundColor: 'white',
          CssRule.flexDirection: 'col',
          CssRule.borderBottomColor: '#ebedf0',
          CssRule.borderBottomWidth: border == true ? 0.5 : 0.0,
          CssRule.borderBottomStyle: 'solid',
        },
        'top': {
          CssRule.height: 24,
          CssRule.width: double.infinity,
          CssRule.flexDirection: 'row',
          CssRule.justifyContent: 'space-between',
          CssRule.alignItems: center == true ? 'center' : 'flex-start',
        },
        'bottom': {
          CssRule.height: 24,
          CssRule.width: double.infinity,
          CssRule.flexDirection: 'row',
          CssRule.justifyContent: 'space-between',
          CssRule.alignItems: 'center'
        },
        'left': {
          CssRule.fontSize: 14,
          CssRule.color: '#323233',
          CssRule.flexDirection: 'row'
        },
        'title': {
          CssRule.flexDirection: 'row',
          CssRule.alignItems: 'center',
          CssRule.fontSize: size == 'large' ? 16 : 14,
          ...titleStyle
        },
        'label': {
          CssRule.color: '#969799',
          CssRule.fontSize: size == 'large' ? 16 : 14,
          ...labelStyle
        },
        'right': {
          CssRule.fontSize: size == 'large' ? 18 : 14,
          CssRule.color: 'rgb(150, 151, 153)',
          CssRule.flexDirection: 'row',
          CssRule.alignItems: 'center',
          ...valueStyle
        }
      };
    }

    renderLeftTitle() {
      if (slot[VanCellSlot.title] != null) return slot[VanCellSlot.title]();
      if (title == '' || title == null) return SizedBox();
      return Frame(
          styles: getStyles()['title'],
          children: [VanIcon(name: icon, size: 25), TextView(title!)]);
    }

    renderLeftLable() {
      if (label == '' || label == '') return Container();
      return slot[VanCellSlot.label] ??
          TextView(label ?? '', styles: getStyles()['label']);
    }

    getLinkIcon() {
      final direction = {
        'up': Icons.keyboard_arrow_up,
        'left': Icons.keyboard_arrow_left,
        'down': Icons.keyboard_arrow_down,
        'right': Icons.keyboard_arrow_right
      };
      if (direction[arrowDirection] != null) {
        return VanIcon(name: direction[arrowDirection], size: 20);
      } else {
        return VanIcon(name: Icons.keyboard_arrow_right, size: 20);
      }
    }

    renderRight() {
      if (slot[VanCellSlot.value] != null) return slot[VanCellSlot.value]();
      return Frame(styles: getStyles()['right'], children: [
        slot[VanCellSlot.value] ??
            TextView(
              value ?? '',
              styles: getStyles()['right'],
            ),
        isLink == true ? getLinkIcon() : Container()
      ]);
    }

    renderTop() {
      List<Widget> children = [];
      if (slot[VanCellSlot.title] != null || title != null) {
        children.add(renderLeftTitle());
      }
      if (slot[VanCellSlot.value] != null || value != null || isLink == true) {
        children.add(renderRight());
      }
      return Frame(
        styles: getStyles()['top'],
        children: children,
      );
    }

    renderBottom() {
      if (label != null && label != '') {
        return Frame(styles: getStyles()['bottom'], children: [
          renderLeftLable(),
        ]);
      } else {
        return SizedBox();
      }
    }

    return Frame(
        onClick: onClick,
        styles: getStyles()['main'],
        children: [renderTop(), renderBottom()]);
  }
}
